﻿<phone:PhoneApplicationPage 
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    
    xmlns:ShoppingList_Converters="clr-namespace:ShoppingList.Converters"
     xmlns:sltoolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

    xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" xmlns:Coding4Fun_Phone_Controls="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
     sltoolkit:TiltEffect.IsTiltEnabled="True"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
	x:Class="ShoppingList.NewItemShoppingProduct"
	Orientation="Portrait"
	shell:SystemTray.IsVisible="True">

	<phone:PhoneApplicationPage.Resources>
		<ShoppingList_Converters:DoubleToFormatStringConverter x:Key="DoubleToFormatStringConverter"/>
		<ShoppingList_Converters:StringToImageConverter x:Key="StringToImageConverter2"/>
		<ShoppingList_Converters:StringToImageConverter x:Key="StringToImageConverter1"/>
		<ShoppingList_Converters:StringToImageConverter x:Key="StringToImageConverter"/>
		<DataTemplate x:Key="ElementItemTemplate"/>
	</phone:PhoneApplicationPage.Resources>
	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>
	<phone:PhoneApplicationPage.DataContext>
		<StaticResource ResourceKey="Locator"/>
	</phone:PhoneApplicationPage.DataContext>

    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>

    <!--LayoutRoot is the root grid where all page content is placed-->
	<Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{Binding ViewModelShopping, Mode=OneWay}">
		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:Name="VisualStateGroup" ec:ExtendedVisualStateManager.UseFluidLayout="True">
				<VisualStateGroup.Transitions>
					<VisualTransition GeneratedDuration="0:0:0.3">
						<VisualTransition.GeneratedEasingFunction>
							<BackEase EasingMode="EaseOut" Amplitude="0.2"/>
						</VisualTransition.GeneratedEasingFunction>
					</VisualTransition>
				</VisualStateGroup.Transitions>
				<VisualState x:Name="ShowInput">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="stackPanel">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Visible</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="grid">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Collapsed</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="HideInput">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="grid">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Visible</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="stackPanel">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Collapsed</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="*"/>
		</Grid.RowDefinitions>
		
		<VisualStateManager.CustomVisualStateManager>
			<ec:ExtendedVisualStateManager/>
		</VisualStateManager.CustomVisualStateManager>
<!--ContentPanel - place additional content here-->
		<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,116,12,0">
			<Grid.RowDefinitions>
				<RowDefinition Height="0.086*"/>
				<RowDefinition Height="0.092*"/>
				<RowDefinition Height="0.665*"/>
				<RowDefinition Height="0.157*"/>
			</Grid.RowDefinitions>
			<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="mis compras" Style="{StaticResource PhoneTextGroupHeaderStyle}" Margin="12,0,0,10" d:LayoutOverrides="Height"/>
			<Coding4Fun_Phone_Controls:Tile Content="Tile" HorizontalAlignment="Left" Margin="12,8,0,4" Grid.Row="1" Background="{StaticResource PhoneAccentBrush}" ContentTemplate="{StaticResource TileAddButtonTemplate}" d:LayoutOverrides="Height" Command="{Binding NewElementCommand}">
				<i:Interaction.Triggers>
					<i:EventTrigger EventName="Click">
						<ec:GoToStateAction StateName="ShowInput"/>
					</i:EventTrigger>
				</i:Interaction.Triggers>
			</Coding4Fun_Phone_Controls:Tile>
			<ListBox Margin="8,74,8,8" Grid.Row="2" ItemsSource="{Binding ProductElements, Mode=TwoWay}" >
				<ListBox.ItemTemplate>
								<DataTemplate>
			<Grid d:DesignWidth="256" d:DesignHeight="118">
				<toolkit:ContextMenuService.ContextMenu>
													
													<toolkit:ContextMenu x:Name="MyMenu" > 
														
														<toolkit:MenuItem Header="Eliminar" DataContext="{Binding DataContext, ElementName=ContentPanel}"
														Command="{Binding DeleteElementProductCommand, Mode=OneWay}" 
														CommandParameter="{Binding DataContext, ElementName=MyMenu, Mode=TwoWay}" 
														/>              		
														</toolkit:ContextMenu>                 	
												</toolkit:ContextMenuService.ContextMenu>
				
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="0.348*"/>
					<ColumnDefinition Width="0.652*"/>
				</Grid.ColumnDefinitions>
				<Border Height="75" Margin="8,6,8,8" Width="75" Background="{StaticResource PhoneAccentBrush}">
					<Image Source="/icons/appbar.favs.rest.png"/>
				</Border>
				<TextBlock Margin="8,8,8,0" TextWrapping="Wrap" Text="Cantidad:" VerticalAlignment="Top" Grid.Column="1" Style="{StaticResource PhoneTextBlockBase}"/>
				<TextBlock Margin="8,35,8,0" TextWrapping="Wrap" Text="{Binding Amount, Mode=TwoWay}" VerticalAlignment="Top" Grid.Column="1" Style="{StaticResource PhoneTextSmallStyle}"/>
				<TextBlock Margin="8,0,8,31" TextWrapping="Wrap" Text="Costo:" VerticalAlignment="Bottom" Grid.Column="1" Style="{StaticResource PhoneTextBlockBase}"/>
				<TextBlock Margin="8,87,8,0" TextWrapping="Wrap" Text="{Binding Cost, Mode=TwoWay}" VerticalAlignment="Top" Grid.Column="1" Style="{StaticResource PhoneTextSmallStyle}"/>
			</Grid>
							    </DataTemplate>
			    </ListBox.ItemTemplate>
				
			</ListBox>
			
			
	
			<Grid x:Name="grid1" Height="70" Margin="8,0,0,0" Grid.Row="2" VerticalAlignment="Top">
				<StackPanel x:Name="stackPanel" Orientation="Horizontal" Visibility="Collapsed" DataContext="{Binding CurrentProductElement, Mode=TwoWay}" >
					<TextBlock TextWrapping="Wrap" Text="Cantidad:" VerticalAlignment="Center"/>
					<TextBox x:Name="TxtAmount" TextWrapping="Wrap" InputScope="Number" Width="122" Text="{Binding Amount, Mode=TwoWay}"/>
					<TextBlock x:Name="TxtCuantity" TextWrapping="Wrap" Text="$:" VerticalAlignment="Center"/>
					<TextBox TextWrapping="Wrap" Width="122" InputScope="Number" Text="{Binding Cost, Mode=TwoWay}"/>
					<Coding4Fun_Phone_Controls:RoundButton Content="" VerticalAlignment="Stretch" Margin="0,8" Command="{Binding AddProductCommand}" DataContext="{Binding DataContext, ElementName=grid1, Mode=TwoWay}">
						<i:Interaction.Triggers>
							<i:EventTrigger EventName="Click">
								<ec:GoToStateAction StateName="HideInput"/>
							</i:EventTrigger>
						</i:Interaction.Triggers>
					</Coding4Fun_Phone_Controls:RoundButton>
				</StackPanel>
				<Grid x:Name="grid">
					<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="En esta lista estas viendo  todos los productos que has comprado en esta categoría." VerticalAlignment="Top"/>
				</Grid>
			</Grid>
			<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Total de elementos comprados:" VerticalAlignment="Top" Margin="8,8,0,0" Grid.Row="3"/>
			<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Total del costo acumulado:" Margin="49,0,0,8" Grid.Row="3" VerticalAlignment="Bottom"/>
			<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding AmountElement, Mode=TwoWay}" VerticalAlignment="Top" Margin="0,0,7,0" Grid.Row="3" Style="{StaticResource PhoneTextGroupHeaderStyle}" FontFamily="Segoe WP Light"/>
			<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding CostElement, Converter={StaticResource DoubleToFormatStringConverter}, Mode=TwoWay}" Margin="0,0,7,5" Grid.Row="3" FontFamily="Segoe WP Light" Style="{StaticResource PhoneTextGroupHeaderStyle}" VerticalAlignment="Bottom"/>
		</Grid>
		<Grid Height="116" Grid.Row="1" VerticalAlignment="Top" Margin="12,0">
			<StackPanel Orientation="Horizontal">
				<Border Height="100" Margin="10,0,20,0" Width="100" Background="{StaticResource PhoneAccentBrush}">
					<Image Source="{Binding ProductItem.CurrentProduct.ImageUri, Converter={StaticResource StringToImageConverter1}}"/>
				</Border>
				<TextBlock TextWrapping="Wrap" Text="{Binding ProductItem.CurrentProduct.Name, Mode=TwoWay}" VerticalAlignment="Center" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
			</StackPanel>
		</Grid>
	</Grid>
</phone:PhoneApplicationPage>